<template>
  <view>
    <u-navbar title="患者资料" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="display: flex; align-items: center; margin: 20rpx 28rpx; flex-wrap: wrap">
      <view :class="i.default == 1 ? 'wu' : 'wu'" style="" v-for="i in arr" @tap="setPatient(i)" style="position: relative">
        <view class="" style="width: 15rpx; height: 15rpx; border-radius: 50%; background: #19a2ff; position: absolute; top: 15rpx; left: 15rpx" v-if="i.default == 1"></view>
        <image :src="i.patient_avatar" mode="aspectFill" style="width: 86rpx; height: 86rpx; border-radius: 50%; margin-top: 36rpx"></image>
        <view class="" style="font-size: 28rpx">
          {{ i.patient_name }}
        </view>
        <view class="" style="font-size: 24rpx; margin-top: 25rpx">{{ i.patient_gender_text }} {{ i.patient_age }}岁</view>
      </view>
      <image src="https://wenzhen.fuerle168.com/static/user/add.png" mode="" style="width: 213rpx; height: 250rpx; margin-top: 20rpx" @tap="show = true"></image>
    </view>
    <u-modal v-model="show" :show-cancel-button="true" title="添加患者" @confirm="confirm" @cancel="cancel">
      <view class="slot-content">
        <view class="" @tap="show1 = true" style="text-align: right; font-size: 28rpx; padding-right: 15rpx; color: #19a2ff" v-if="id">删除</view>
        <view class="" style="display: flex; align-items: center; margin-top: 41rpx">
          <view class="" style="padding-left: 49rpx; font-size: 28rpx">性别</view>
          <view class="" style="display: flex; margin-left: 71rpx">
            <view :class="current == k ? 'on' : 'on1'" v-for="(i, k) in list" :key="k" @tap="current = k" style="margin-right: 54rpx">
              {{ i.name }}
            </view>
          </view>
        </view>
        <!-- 姓名 -->
        <view class="" style="display: flex; align-items: center; margin-top: 41rpx">
          <view class="" style="padding-left: 49rpx; font-size: 28rpx">姓名</view>
          <view class="" style="">
            <input type="text" placeholder="输入真实姓名" style="font-size: 28rpx; color: #999999; padding-left: 76rpx" v-model="username" />
          </view>
        </view>
        <!-- 年龄 -->
        <view class="" style="display: flex; align-items: center; margin-top: 41rpx">
          <view class="" style="padding-left: 49rpx; font-size: 28rpx">年龄</view>
          <view class="" style="">
            <input type="number" placeholder="输入真实年龄" style="font-size: 28rpx; color: #999999; padding-left: 76rpx" v-model="age" />
          </view>
        </view>
        <!-- 手机号 -->
        <view class="" style="display: flex; align-items: center; margin-top: 41rpx">
          <view class="" style="padding-left: 49rpx; font-size: 28rpx">手机号</view>
          <view class="" style="">
            <input type="number" placeholder="输入手机号" style="font-size: 28rpx; color: #999999; padding-left: 50rpx" v-model="mobile" />
          </view>
        </view>
        <view class="" style="display: flex; align-items: center; margin-top: 25rpx; margin-left: 49rpx">
          <radio :checked="radio" style="transform: scale(0.7)" color="#19A2FF" @tap="radio = !radio"></radio>
          <view class="" style="font-size: 24rpx; color: #666666">是否选为默认患者</view>
        </view>
        <!--  -->
        <view class="" style="font-size: 28rpx; text-align: center; padding: 42rpx 70rpx">*请确认患者信息真实准确，以便医生 为您提供更加精准的服务</view>
      </view>
    </u-modal>
    <u-modal v-model="show1" content="您确定删除该患者吗？" :show-cancel-button="true" @confirm="confirmz"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      show: false,
      show1: false,
      current: 0,
      list: [
        {
          name: '男'
        },
        {
          name: '女'
        }
      ],
      arr: [],
      username: '',
      age: '',
      mobile: '',
      type: null,
      radio: true,
      id: null
    };
  },
  //方法
  methods: {
    confirmz() {
      this.api({
        url: '/api/patient/delPatients',
        method: 'post',
        data: {
          patient_id: this.id
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        this.show = false;
        this.show1 = false;
        this.oss();
      });
    },
    oss() {
      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.arr = res.data;
      });
    },
    cancel() {
      console.log('------');
      this.username = '';
      this.age = '';
      this.mobile = '';
      this.id = null;
    },
    confirm() {
      if (this.username == '') {
        uni.showToast({
          title: '请输入就诊人姓名',
          icon: 'none'
        });
      } else if (this.age == '') {
        uni.showToast({
          title: '请输入就诊人年龄',
          icon: 'none'
        });
      } else if (this.mobile == '') {
        uni.showToast({
          title: '请输入就诊人手机号',
          icon: 'none'
        });
      } else {
        if (this.id) {
          this.api({
            url: '/api/patient/editPatients',
            method: 'post',
            data: {
              patient_name: this.username,
              patient_age: this.age,
              patient_mobile: this.mobile,
              patient_gender: this.current == 0 ? 1 : 0,
              default: this.radio ? 1 : 0,
              patient_id: this.id
            }
          }).then((res) => {
            this.username = '';
            this.age = '';
            this.mobile = '';
            this.id = null;
            this.current = 0;
            this.oss();
          });
        } else {
          this.api({
            url: '/api/index/addPatient',
            method: 'post',
            data: {
              username: this.username,
              age: this.age,
              mobile: this.mobile,
              gender: this.current == 0 ? 1 : 0,
              default: this.radio ? 1 : 0
            }
          }).then((res) => {
            this.username = '';
            this.age = '';
            this.mobile = '';
            this.current = 0;
            this.oss();
          });
        }
      }
    },
    setPatient(e) {
      if (this.type) {
        this.api({
          url: '/api/index/setPatient',
          method: 'post',
          data: {
            patient_id: e.patient_id
          }
        }).then((res) => {
          let pages = getCurrentPages(); //获取所有页面栈实例列表
          let nowPage = pages[pages.length - 1]; //当前页页面实例
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          prevPage.$vm.data = e;
          uni.navigateBack();
        });
      } else {
        this.username = e.patient_name;
        this.age = e.patient_age;
        this.mobile = e.patient_mobile;
        this.current = e.patient_gender == 1 ? 0 : 1;
        this.radio = e.default == 1 ? true : false;
        this.id = e.patient_id;
        this.show = true;
      }
    }
  },
  //首页渲染
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    this.oss();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.on {
  width: 102rpx;
  height: 50rpx;
  border: 1rpx solid #1a9eff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 28rpx;
  color: #1a9eff;
}

.on1 {
  width: 102rpx;
  height: 50rpx;
  border: 1rpx solid #666666;
  border-radius: 10rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 28rpx;
  color: #666666;
}

.wu {
  width: 213rpx;
  height: 250rpx;
  background: #fff;
  text-align: center;
  margin-top: 20rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
}
.wu1 {
  width: 213rpx;
  height: 250rpx;
  background: #fff;
  border: 1rpx solid #1a9eff;
  text-align: center;
  margin-top: 20rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
}
</style>
